<template>
  <div class="detail-table">
    <div class="title"
         @click.stop="flag = !flag">
      <div>{{title}}</div>
      <img src='@/assets/img/down.png'
           style="height: 8px; width:13px"
           v-if="flag">
      <img src='@/assets/img/up.png'
           style="height: 8px; width:13px"
           v-else>
    </div>
    <div v-if=!isRectify()>
      <div style="overflow:auto;width:100%"
           v-if="flag">
        <div style="width:100%"
             v-for="(item, i) in list"
             :key="i">
          <group v-for="(value, key, index) in list[i]"
                 :key="index">
            <cell :title='key'
                  v-if=!isImage(key)>
              <div class="value">{{value}}
              </div>
            </cell>
            <group :title='key'
                   v-if=isImage(key)>
              <picture-upload :fieldToken="value"
                              :pageToken='value'
                              :value='value'></picture-upload>
            </group>
          </group>

          <div class="line"></div>
        </div>
      </div>
    </div>
    <!-- 前海项目整改通知单模块临时调整明细表内容，其余模块使用上述明细表-->
    <div v-if=isRectify()>
      <div style="overflow:auto;width:100%"
           v-if="flag">
        <div style="width:100%"
             v-for="(item, i) in list"
             :key="i">
          <group v-for="(value, key, index) in list[i]"
                 :key="index">
            <cell :title='key'
                  v-if='!isImage(key)&&!needModify(key)&&!isTextArea(key)&&!isTypeOrderId(key)'>
              <div class="value">{{value}}
              </div>
            </cell>
            <group :title='key'
                   v-if='isImage(key)'>
              <picture-upload v-model='list[i][key]'
                              :pageToken='pageToken'
                              :readonly='!needModify(key)'></picture-upload>

            </group>
            <group v-if='selectState(key)&&needModify(key)'>
              <popup-radio :title="key"
                           :options='options'
                           v-model='list[i][key]'
                           @on-hide="closeMask"></popup-radio>

            </group>
            <group v-if='isTextArea(key)'>
              <x-textarea :title="key"
                          v-model="list[i][key]"
                          :readonly='!needModify(key)'
                          :autosize='isTextArea(key)'
                          :rows=1></x-textarea>
            </group>
          </group>
          <div class="line"></div>
        </div>
      </div>
    </div>
    <!--临时模块结束分割线------------------------------------------------------------------------------------------------->
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "detailTable",
  created () {
    this.setValue()
  },
  props: {
    prop: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    value: {
      type: Array,
      default () {
        return []
      }
    },
    title: {
      type: String,
      default: '明细表'
    },
    pageToken: {
      type: String
    }
  },
  data () {
    return {
      list: [],
      flag: false,
      options: ['未整改', '已整改', '整改不合格']
    }
  },
  computed: {
    /**
     * 获取当前明细表所属的主表单信息
     * return {obj}
     */
    currentRow () {
      return this.$store.state.currentRow
    }
  },
  methods: {
    setValue () {
      this.list = [];
      this.value.map((item, i) => {
        let obj = {};
        this.prop.columns.forEach((e, j) => {
          if (e.Id == "CREATETIME" && item[e.Id] && item[e.Id].length > 10) {
            obj[e.text] = item[e.Id].val.substring(0, 10)
          } else {
            obj[e.text] = item[e.Id].val || ''
          }
        });
        this.list.push(obj)
      })
      //仅针对前海项目质量整改单根据typeorderid排序
      if(this.currentRow.BIZOBJID == 'PMQUALITY_RECTIFY'){
        if(this.list.length > 0 && this.list[0].hasOwnProperty("类型排序编号")){
          this.list.sort(this.compare("类型排序编号"));
        }
        for(var i = 0; i < this.list.length ; i++){
          if(this.list[i]['类型'] == '亮点'){
            delete(this.list[i]['整改状态'])
          }
        }
      }
      //仅针对前海项目单项目年度投资计划审批流程进行排序，其他明细表要排序需重新编码
      if(this.list.length > 0 && this.list[0].hasOwnProperty("月份")){
        this.list.sort(this.compare("月份"));
      }
      
    },
    //根据不同字段对明细表进行排序
    // property为需要排序的字段
    compare(property){
      return function(a,b){
        var value = a[property];
        var valueCompared = b[property];
        return value - valueCompared;
      }
    },
    /**
     * 判断一个字符串是否为fileToken,
     * param:{string}str
     */
    isFile (str) {
      var reg = /\w{8}-\w{4}-\w{4}-\w{4}-\w{12}/
      if (str.match(reg)) {
        return true
      } else {
        return false
      }
    },
    /**
     * 判断一个字段是否需要上传图片
     * param:{string}str
     */
    isImage (str) {
      return str.indexOf('图片') < 0 ? false : true
    },
    /**
     * 判断是否为质量或者安全整改通知单
     */
    isRectify () {
      return this.currentRow.BIZOBJID.indexOf('RECTIFY') < 0 ? false : true
    },
    /**
     *根据当前环节和字段，判断是否可以修改某些控件值
     *param:{string} str需要填写的字段值
     * return {boolean}
     */
    needModify (str) {
      let modifyFields = ['整改状态', '整改后图片', '说明']
      if (this.currentRow.BIZOBJID === 'PMQUALITY_RECTIFY') {
        if (this.currentRow.NODEID === 'UserTask_2') {
          return modifyFields.toString().indexOf(str) > -1
        } else if (this.currentRow.NODEID === 'UserTask_3' || this.currentRow.NODEID === 'UserTask_4') {
          return str === '整改状态'
        }
      }
      if (this.currentRow.BIZOBJID === 'PMHSE_RECTIFY') {
        if (this.currentRow.NODEID === 'UserTask_3') {
          return modifyFields.toString().indexOf(str) > -1
        } else if (this.currentRow.NODEID === 'UserTask_4' || this.currentRow.NODEID === 'UserTask_5') {
          return str === '整改状态'
        }
      }
      return false;

    },
    /**
     * 判断是否需要选择状态
     * param:{string}str
     */
    selectState (str) {
      return str.indexOf('状态') > -1
    },
    /**
     * 判断是否是文本域
     */
    isTextArea (key) {
      return '描述，说明'.indexOf(key) > -1
    },
    //隐藏质量整改单中TypeOrderId字段
    isTypeOrderId(key){
      if(key == '类型排序编号'){
        return true
      }else{
        return false
      }
    },
    isEqualsLD(val){
      debugger
      if(val == '亮点'){
        return false
      }else{
        return true
      }
    }
  },
  watch: {
    /**
     * 监听明细表的数值变化，如果有变化则提交给父页面（仅针对质量整改通知单及安全整改通知单）
     */
    list: {
      handler: function (n, o) {
        if (this.currentRow.BIZOBJID == 'PMQUALITY_RECTIFY' || this.currentRow.BIZOBJID === 'PMHSE_RECTIFY') {
          let tempValue = this.value
          let temp = []
          n.map((item, i) => {
            let obj = {}
            this.prop.columns.forEach((e, j) => {
              obj[e.Id] = item[e.text]
            })
            temp.push(obj)
          })
          for (let i = 0; i < tempValue.length; i++) {
            for (let j in temp[i]) {
              tempValue[i][j]['val'] = temp[i][j]
            }
          }
          console.log(tempValue)
          this.$emit('detailChange', tempValue)
        }
      },
      deep: true
    }
  },
  components: {
  }
}
</script>

<style scoped>
/* .detail-table{
  padding: 0 40px;
  position: relative;
} */
.title {
  font-size: 16px;
  color: #343434;
  display: flex;
  justify-content: space-between;
  margin: 0 40px;
  align-items: center;
  border-top: 1px solid #999999;
  margin: 0 40px;
  padding: 5px 0;
}
.cell {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  color: #9f9f9f;
}
.value {
  color: #343434;
}
.line {
  height: 1px;
  margin: 0 40px;
  background: #999999;
}
</style>
